<template>
  <div class="screen-container-main-left">
    <!-- 学校概况 -->
    <dv-border-box-10 class="school">
      <div class="screen-container-main-content">
        <div class="screen-container-main-title">
          学校概况
        </div>
        <div class="school-content">
          <a-row type="flex" justify="space-between">
            <a-col class="df ai jc">
              <dv-decoration-9 class="school-decoration">
                <img src="../../../assets/largeScreen-img/u46.png" alt="" />
              </dv-decoration-9>
              <div>
                <p>教职工</p>
                <p>{{ data.teacher_number }} 人</p>
              </div>
            </a-col>
            <a-col class="df ai jc">
              <dv-decoration-9 class="school-decoration">
                <img src="../../../assets/largeScreen-img/u47.png" alt="" style="width:26px;height: 26px;" />
              </dv-decoration-9>
              <div>
                <p>学生</p>
                <p>{{ data.student_number }} 人</p>
              </div>
            </a-col>
            <a-col class="df ai jc">
              <dv-decoration-9 class="school-decoration" style="">
                <img src="../../../assets/largeScreen-img/u48.png" alt="" />
              </dv-decoration-9>
              <div>
                <p>面积</p>
                <p>{{ data.kindergarten_acreage }} ㎡</p>
              </div>
            </a-col>
          </a-row>
          <div class="school-msg">
            <p style="-webkit-box-orient: vertical;">{{ data.kindergarten_introduction }}</p>
          </div>
          <div class="school-img df ai jc">
            <!-- <a-icon type="left-circle" theme="filled" @click="left"/> -->
            <div class="content">
              <img
                v-for="(item, i) in data.kindergarten_image"
                :key="item"
                class="item"
                :class="{ scroll: animate == true && i == 0 }"
                :src="getImgView(item)"
                alt="img"
              />
            </div>
            <!-- <a-icon type="right-circle" theme="filled"/> -->
          </div>
        </div>
      </div>
    </dv-border-box-10>
    <!-- 幼儿出勤 -->
    <dv-border-box-10 class="out-work">
      <div class="screen-container-main-content">
        <div class="screen-container-main-title">
          幼儿出勤
        </div>
        <div class="out-work-content" style="height: 75%;">
          <a-row type="flex" justify="space-between">
            <a-col v-for="(item, index) in list" :key="item.title">
              <img class="take-notes-img" :src="item.img" alt="" />
              <span>{{ item.title }}</span>
              <span class="take-notes-data">{{ item.val }}</span>
              <span v-show="index != list.length - 1">人</span>
            </a-col>
          </a-row>
          <bar
            style="margin-top:10px"
            :splitLineShow="false"
            :barName="barName"
            :barData="barData"
            :color="['#A9F387', '#48D8BF']"
            :barWidth="10"
            :symbolSize="5"
            :width="'100%'"
            :seriesName="'出勤率'"
            :unit="'%'"
            :height="'100%'"
            :dataZoomShow="false"
          ></bar>
        </div>
      </div>
    </dv-border-box-10>
  </div>
</template>
<script>
import Bar from '@/components/Echarts/Bar.vue'
import u105 from '@/assets/analysis-img/u105.png'
import u106 from '@/assets/analysis-img/u106.png'
import u107 from '@/assets/analysis-img/u107.png'
import u108 from '@/assets/analysis-img/u108.png'
import u94 from '@/assets/analysis-img/u94.png'
import { getAction, getFileAccessHttpUrl } from '@/api/manage.js'
export default {
  name: 'left',
  data() {
    return {
      list: [
        { img: u94, title: '应到', key: 'shouldArrive', val: 0 },
        { img: u105, title: '实到', key: 'actualArrival', val: 0 },
        { img: u106, title: '请假', key: 'absence', val: 0 },
        { img: u107, title: '迟到', key: 'late', val: 0 },
        { img: u108, title: '出勤率', key: 'rate', val: 0 }
      ],
      data: {
        teacher_number: '',
        student_number: '',
        kindergarten_acreage: '',
        kindergarten_introduction: ''
      },
      barName: [],
      barData: [],
      animate: false,
      style: {
        // "margin":"3px"
      }
    }
  },
  components: {
    Bar
  },
  props: {
    dataForm: Object
  },
  watch: {
    dataForm: {
      handler(val) {
        this.data = val
      },
      deep: true
      // immediate:true
    }
  },
  filters: {},

  computed: {},

  created() {
    this.getWork('all')
    this.getWork('class')
  },

  activated() {},

  mounted() {
    setInterval(this.left, 3500)
  },

  methods: {
    left() {
      if (this.data.kindergarten_image.length >= 5) {
        this.animate = true
        setTimeout(() => {
          this.data.kindergarten_image.push(this.data.kindergarten_image[0])
          this.data.kindergarten_image.shift()
          this.animate = false // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 500)
      }
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    // 幼儿出勤
    getWork(statisticalScope) {
      let url = '/management/skStudentCheck/getStudentCheckStatistical'
      const params = {
        statisticalScope: statisticalScope,
        timeScope: 'today'
      }
      getAction(url, params)
        .then(res => {
          if (res.success) {
            if (res.result.length > 0) {
              if (statisticalScope == 'all') {
                this.list.forEach(item => {
                  item.val = res.result[0][item.key]
                })
                this.list[4].val = (Number(res.result[0].rate) * 100).toFixed(2) + '%'
              }
              if (statisticalScope == 'class') {
                res.result.map(item => {
                  this.barData.push((Number(item.rate) * 100).toFixed(2))
                  this.barName.push(item.className)
                })
              }
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.content {
  width: 500px;
  margin:0 auto;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.5s;
}
.item {
  margin-right: 8px;
}
.scroll {
  transition: all 0.5s;
  margin-left:-103px;
}
.school-msg>p{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  
}
</style>
